/* 单行显示省略号 */
.text-ellipsisl1 {
    overflow: hidden;
    /* 一行显示，不换行 */
    white-space: nowrap;
    /* 文本溢出 出现省略号 */
    text-overflow: ellipsis;
}

/* 两行显示省略号 */
.text-ellipsisl2 {
    overflow: hidden;
    text-overflow: ellipsis;

    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;

    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;

    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

/* 两行显示省略号 */
.text-ellipsisl3 {
    overflow: hidden;
    text-overflow: ellipsis;

    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;

    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 3;

    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

/* 进场动画 */
.aniIn {
    animation: Test1 1s ease-in-out 0s forwards;
}

@keyframes Test1 {

    /* from等价于0%,to等价于100% */
    to {
        transform: rotate(180deg);
    }
}

/* 出场动画 */
.aniOut {
    animation: Test2 1s ease-in-out 0s forwards;
}

@keyframes Test2 {

    /* from等价于0%,to等价于100% */
    0% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}